<template>
	<view class="AddAddress">
		<view class="AddAddress_item">
			<!-- 姓名 -->
			<view class="AddAddress_item_demo">
				<view class="title">收货人</view>
				<view class="name">
					<input type="text" placeholder="请填写收获人姓名" v-model="addressData.name" placeholder-style="color:#7d7d7d" confirm-type="done" />
				</view>
			</view>
			<!-- 手机号 -->
			<view class="AddAddress_item_demo">
				<view class="title">手机号码</view>
				<view class="name">
					<input type="number" placeholder="请填写收获人手机号" v-model="addressData.mobile" placeholder-style="color:#7d7d7d"
						confirm-type="done" />
				</view>
			</view>
			<!-- 所在地区 -->
			<view class="AddAddress_item_demo" >
				<view class="title">所在地区</view>
				<view class="name">
					<!-- 选择地区 -->	
				<input type="text" @tap="btnClick" :value="addressData.formatted_address" placeholder="选择地区" disabled />
						
				</view>

			</view>
			<view class="AddAddress_item_demo1">
				<view class="title">详细地址</view>
				<view class="name">
					<textarea class="textarea" placeholder="街道、楼牌号等" v-model="addressData.address"></textarea>
				</view>
			</view>

		</view>
		<view class="AddAddress_item1">
			<view class="AddAddress_item1_left">设置默认地址</view>
			<view class="AddAddress_item1_right">
				<switch class="switch"  :checked="addressData.default == 1" @change="switchChange" />
			</view>
		</view>
		<view class="AddAddress_btn" @tap="confirm">保存</view>
		<wanl-address ref='wanlAddress' @selectAddress="successSelectAddress"></wanl-address>
	</view>
</template>

<script>
	import wanlAddress from '@/components/wanl-address/wanl-address.vue'
	export default {
		data() {
			return {
				
                addressData:{
					name: '',
					mobile: '',
					default: 0,
					//地区
					country: '', // 国家
					province: '', //省份
					city: '省、市、区', // 城市
					citycode: '', // 城市代码
					district: '', // 县
					adcode: '', // 地区代码
					formatted_address: '', //详细地区
					//详情
					address: '', //详细地址
					address_name: '', // 地址名称
					location: '' //经纬度
				}
			}
		},
     components:{
		
		wanlAddress
	 },
		methods: {
			
			switchChange(e) {
				console.log('e',e)
				if (e.detail.value) {
					this.addressData.default = 1;
				} else {
					this.addressData.default = 0;
				}
			},
			btnClick() {
				console.log('sdfgdg')
				this.$refs.wanlAddress.show()
			},
			// 获取省市区
			successSelectAddress(address) {
				console.log('address',address)
				this.addressData.country = address.country;
				this.addressData.province = address.province;
				this.addressData.city = address.city;
				this.addressData.citycode = address.citycode;
				this.addressData.district = address.district;
				this.addressData.formatted_address = address.formatted_address;
				this.addressData.location = address.location;
				this.addressData.adcode = address.adcode;
				this.addressList.location = address.location;
				this.addressList.adcode = address.adcode;
			},
			// 点击保存按钮添加地址
			confirm(){
				let data = this.addressData;
				console.log('data',data)
				if (!data.name) {
					this.$wanlshop.msg('请填写收货人姓名');
					return;
				}
				if (!/^1[0-9]{10,10}$/.test(data.mobile)) { // 1.0.2升级
					this.$wanlshop.msg('请输入正确的手机号码');
					return;
				}
				if (data.city=='省、市、区') {
					this.$wanlshop.msg('请选择地区');
					return;
				}
				if (!data.address) {
					this.$wanlshop.msg('请填写详细信息');
					return;
				}
				this.$wanlshop.prePage().refreshList(data, this.manageType);
				this.$wanlshop.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
				this.$wanlshop.back(1);
			}

		},
		onNavigationBarButtonTap() {
			this.confirm()
		},
		onLoad(option) {
			console.log('option',option);
			let title = '新增地址 ';
			if (option.type === 'add') {
				this.addressData.default = 1
			}
			if (option.type === 'edit') {
				title = '编辑地址'
				this.addressData = JSON.parse(option.data);
				console.log('addressData',this.addressData)
			}
			this.manageType = option.type;
			this.$wanlshop.title(title);
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.AddAddress {
		&_item {
			background-color: #FFFFFF;
			height: 500rpx;

			&_demo {
				display: flex;
				align-items: center;
				// background-color: pink;
				height: 100rpx;
				border-bottom: 1px solid #f0f0f0;

				.title {
					font-size: 30rpx;
					color: #000000;
					// background-color: red;
					width: 200rpx;
					margin-left: 30rpx;
					height: 80rpx;
					line-height: 80rpx;
				}

				.name {
					// background-color: #007AFF;
					// height: 80rpx;s
					// line-height: 80rpx;
					width: 500rpx;
					font-size: 30rpx;
					color: #000000;
                    text{
						// color: #7d7d7d;
					}
					
					input {
						// background-color: #4CD964;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 30rpx;
						color: #000000;
					}

					
				}

			}

			&_demo1 {
				height: 200rpx;
				display: flex;
				// align-items: center;
				// background-color: pink;

				// border-bottom: 1px solid #f0f0f0;
				.title {
					font-size: 30rpx;
					color: #000000;
					// background-color: red;
					width: 200rpx;
					margin-left: 30rpx;
					height: 80rpx;
					line-height: 80rpx;
				}

				.name {
					// background-color: #007AFF;
					width: 500rpx;
					font-size: 30rpx;
					color: #000000;

					.textarea {
						// background-color:#4CD964;
						height: 200rpx;
						width: 500rpx;
						padding-top: 20rpx;
						box-sizing: border-box;
					}
				}
			}
		}
	.AddAddress_item1{
		background-color: #FFFFFF;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0 60rpx;
		width: 750rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		&_left{
			font-size:30rpx ;
			color: #000000;
		}
		&_right{
			// background-color: pink;
			.switch{
				transform:scale(0.8);
				.wx-switch-input:before{
					background-color: #cdcdcd;
				}
			}
		}
	}
	.AddAddress_btn{
		background-color:#ff3200 ;
		font-size: 30rpx;
		color: #FFFFFF;
		border-radius: 50rpx;
		height: 90rpx;
		line-height: 90rpx;
		width: 700rpx;
		text-align: center;
		margin: 0 auto;
		
	}
	}
</style>
